<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>数据绑定</title>
        <!--引入vue-->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--准备好一个容器-->
        <div id="root">
            <!--普通写法-->
            <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
            双向数据绑定：<input type="text" v-model:value="name"><br/> -->

            <!--简写-->
            单向数据绑定：<input type="text" :value="name"><br/>
            双向数据绑定：<input type="text" v-model="name"><br/>
            
            <!--如下代码错误的，因为v-model只能应用在表单类元素上-->
            <!-- <h2 v-model:x="name">你好</h2> -->
        </div>

        <script type="text/javascript">
            Vue.config.productionTip=false //阻止 vue 在启动时生成生产提示。

            new Vue({
                el:'#root',
                data:{
                    name:'小慧'
                }
            })
        </script>
    </body>
</html>